{extend name="layout" /}
{block name="content"}
<div class="layui-form layui-form-pane" lay-filter="LAY-app-course-form" id="LAY-app-course-form">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>价格信息</li>
            <li>课程介绍</li>
            <!--<li>营销信息</li>
            <li>分销分销</li>-->
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">课程名称</label>
                    <div class="layui-input-inline">
                        <script type="text/html" template>
                        <input type="text" name="title" lay-verify="required" placeholder="请输入课程名称" autocomplete="off"
                               class="layui-input" value="{{ d.params.title || '' }}">
                        </script>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程分类</label>
                    <div class="layui-input-inline">
                        <select name="category_id" lay-verify="required">
                            <option value="">请选择</option>
                            {foreach $categories as $key=>$vo }
                            <option value="{$vo.id}" {if isset($course['category_id']) && $vo['id'] == $course['category_id']}selected{/if}>{$vo.html}{$vo.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">讲师名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" lay-verify="required" placeholder="请输入..." autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程封面</label>
                    <div class="layui-input-inline">
                        <input type="text" name="thumb" lay-verify="required" placeholder="请选择..." autocomplete="off"
                               class="layui-input" id="picture">
                    </div>
                    <button style="float: left;" type="button" class="layui-btn" onClick="upImage()">上传图片</button>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sort" lay-verify="required" placeholder="请输入..." autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="0" title="审核中" checked="">
                        <input type="radio" name="status" value="1" title="上架">
                        <input type="radio" name="status" value="2" title="下架">
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">课程价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" lay-verify="required" placeholder="请输入价格" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程库存</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" lay-verify="required" placeholder="请输入..." autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="last">
                    <label class="layui-form-label">课程规格</label>
                    <div class="layui-inline">
                        <label class="layui-form-label">有效期</label>
                        <div class="layui-input-block">
                            <input type="text" name="time" autocomplete="off" class="layui-input" style="width:100px">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="price" autocomplete="off" class="layui-input" style="width:100px">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">库存</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stock" autocomplete="off" class="layui-input" style="width:100px">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="add" type="button" class="layui-btn layui-btn-warm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">课程介绍</label>
                    <div class="layui-input-inline">
                        <script id="container" name="content" type="text/plain" style="width: 800px;height: 350px;"></script>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item"></div>
            <div class="layui-tab-item"></div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-app-course-submit" id="LAY-app-course-submit" value="确认">
    </div>
</div>
{include file='editor' /}
{/block}
{block name="js"}
<script>
    layui.use(['index', 'form'], function () {
        var $ = layui.$
            , form = layui.form
            , admin = layui.admin;

        <!-- 实例化编辑器 -->
        var ue = UE.getEditor('container', {
            autoHeight: false
        });

        ue.ready(function () {
            //设置内容
            ue.setContent("{$course.content|raw|default=''}");
            //获取内容
            //$("#content").val(ue.getContent())
        });

        //动态添加input输入框
        $("#add").click(function () {
            var str = '<div class="layui-form-item">' +
                '<label class="layui-form-label"></label>' +
                '<div class="layui-input-inline">' +
                '<input type="text" name="ways[]" class="layui-input" lay-verify="required" placeholder="请输入..." autocomplete="off">' +
                '</div>' +
                '<div class="layui-input-block" style="margin-left: 10px">' +
                '<button type="button" class="layui-btn layui-btn-danger removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>' +
                '</div>';

            $("#last").after(str);

            form.render(null, 'LAY-app-course-form');
        });

        //删除动态添加的input输入框
        $("body").on('click', ".removeclass", function () {
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
    })
</script>
{/block}